Hello and welcome to this lecture.
In this show we are going to create the structure for our contact for use in Haiti.
Email.
Hi.
In my projects Sundays going to click on my hastier mail file here which is the indexed text email I
have already got some basic tags already in the documents.
These are what will we'll be using for creating the stropped are run through this.
Sure you know what each of these tags to the first line here.
Doctype basically lets the web browser know that this type of documents and paste here are five document
and then we've caught the head section and the body section most tags this mail tags got hopefully and
they close it close in use identifier with the slash.
He can see all right.
You can see all saw the tags are well in their tent.
It's always good to indent your code so you can read it better.
It also helps others who have to read your code.
So look at this structure here you can tell that the head and the body are both children off hastier
male mr. tag here.
I just me to complete at least the age team.
Autoline tack Mr L O.
So detax is now paid.
He can see the on day dotted on the line there.
Mike is the one here tells your daddy tags are paid so we're gonna start filling up each of these tags
now to make things move a bit faster because I don't want this lecture to go on forever.
I've already seen read written the code so I will just explain part bits and pieces of the code as I
paste them in.
You can see higher have also indented so you can tell from the indentation that line four to eight are
children of the head section.
As you can see in them on their head.
So let me run through the contents of the hets section so whatever's in the head section is for information
purposes.
They're not actually visible to the visitor so they make that set.
You use that to define the cool the character set.
You are using this standard is you have it.
You can read up on it if you if you want to because I may not and don't want to collaborate on it too
much in this lecture so that we don't miss out on the irrelevant stuff the middle name here again is
viewport in green.
Here is an attribute but value are always enclosed in quotes wherever you see these viewport here.
And you notice I have specified these values here.
You mean that so that any device can be used to view the web page of the application.
So each tool enables the screen size whatever screen size you use it will fit and tapped to that screen
size.
That's what this or is bit in here is this skill.
This Care basically is some level right on online 6 here have caught the title for my form line 7.
I have attached a link to my style sheet which is the style sheet I have created here which is this
one here so I'm just attached a link to that.
I've also got cause to be using a query Jake Query is a javascript library so rudduck install it.
I have created a reference to it via a CDL and see the end means content delivery network gryder don't
install it install in it access it directly from Google.
This is very useful.
So if you want to know how this works just typing see the n in your browser and it will tell you all
about it.
So I've attached in reference to that here.
Okay so this will enable me to use due query in this project so that's it for this head section or case
or I have now pasted some code in some posted some coding in to the body section which is from line
12.
Or the way to lying.
Thirty three.
So basically this tags will use to create the ouch or form.
So inside here.
Again notice indented.
Then promptly notice the form.
This is what you.
This is the tag you'd need to create a form.
So this is the open tag folder form and then if I as good write down have got the closing tag their
hide inside that form element.
We all saw courts and gotten hate one tag wanted to send headend tag and then we all got a field set
for the form woodhall used to identify the various fields.
Label is used to label the form.
For example we'll label this as an attribute and the value is name.
So my form me when I launch it or have this filled acquired name.
It's got an import import basically is where you type in something that's an input field.
Give it values text so everything in green here is an attribute and values are enclosed in quotes.
I've also given it an Heidi here.
Code name so if you notice the same thing here.
So that would be the named section where people would type their name and this have also attached a
class here called stored.
Well use this class later we in charge have a script again.
Same process.
This is where they all enter their email label again to label the field and the attributes.
Then we've got some idea as well.
And also this class here remember that a class can be reused several times.
An idea is unique.
So this is a text area.
Actually typed that message again the label tag here to label it.
And this is the attribute.
The value is message gain tash.
This same class here called stored.
I'm gonna use this later for power scripts javascript and then this is the end of the field set for
the form and then attached to a button.
This will be the submit button.
So when people are finished they'll submit their And that's the end of the form and then attached is
script.
Here a link to our javascript that we will.
So this would be the link to the javascript.
It's always good to attach javascript files just before it close in body tag.
That way it does not prevent the contents from loaded so that is it for this section.
We have now created the structure for our form.
If I save this and then we can view and see what the form looks like and the moment I just click save
or so.
This is what the form should look like at the moment without any success applied so you can see here.
This makes it pretty So this is it for the form.
So if you've got something like this well done.
So sit for this lecture in the next lecture.
We are going to implement csx to make this form look a bit prettier.
Thanks for watching.
Bye for now.